<template>
    <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
        <el-menu :default-active="currentCom" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#F0F0F0" active-text-color="#111">
          <el-menu-item index="bar-s">柱形图</el-menu-item>
          <el-menu-item index="line-s">折线图</el-menu-item>
          <el-menu-item index="map-s">地图</el-menu-item>
          <el-menu-item index="pie-s">其他</el-menu-item>
        </el-menu>
        <keep-alive>
          <component :is="currentCom"></component>
        </keep-alive>
    </el-drawer>
</template>
<script>
import BarS from '@/components/Select/BarS.vue'
import LineS from '@/components/Select/LineS.vue'
import PieS from '@/components/Select/PieS.vue'
import MapS from '@/components/Select/MapS.vue'

export default {
  data () {
    return {
      drawer: false,
      currentCom: 'bar-s'
    }
  },
  computed: {
  },
  methods: {
    handleSelect (key, keyPath) {
      this.currentCom = key
    }
  },
  mounted () {
  },
  watch: {
  },
  components: {
    BarS,
    LineS,
    PieS,
    MapS
  }
}
</script>

<style scoped>
</style>

<style>
  .el-form-item {
        margin-bottom: 0px
    }
</style>
